import React, { useState, useEffect } from "react";
import { Card, Form, Input, Button, Table } from "antd";
import {
	SearchOutlined,
	EditOutlined,
	DeleteOutlined,
} from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { getPageList } from "@/api/hosp/hospitalSet";

import "./index.less";

function HospitalSet() {
	const [form] = Form.useForm();
	const [page] = useState<number>(1);
	const [limit] = useState<number>(10);
	const [total, setTotal] = useState(0);
	const [hospitalSet, setHospitalSet] = useState([]);
	const navigate = useNavigate();

	const columns = [
		{
			title: "序号",
			key: "index",
			render: (_a: any, _b: any, index: number) => {
				return index + 1;
			},
		},
		{ title: "医院名称", dataIndex: "hosname", key: "hosname" },
		{ title: "医院编号", dataIndex: "hoscode", key: "hoscode" },
		{
			title: "api基础路径",
			dataIndex: "apiUrl",
			key: "apiUrl",
		},
		{
			title: "联系人姓名",
			dataIndex: "contactsName",
			key: "contactsName",
		},
		{
			title: "联系人手机",
			dataIndex: "contactsPhone",
			key: "contactsPhone",
		},
		{
			title: "状态",
			dataIndex: "status",
			render: (status: number) => (status ? "可用" : "不可用"),
			key: "status",
		},
		{
			title: "操作",
			key: "operator",
			width: 300,
			render: (row: any) => {
				return (
					<>
						<Button
							icon={<EditOutlined />}
							type="primary"
							className="hospital-btn"
							onClick={() => navigate(`/hosp/hospitalSet/edit/${row.id}`)}
						/>
						<Button
							icon={<DeleteOutlined />}
							danger
							type="primary"
							className="hospital-btn"
						/>
						<Button type="primary" disabled className="hospital-btn">
							锁定
						</Button>
						<Button type="primary" disabled>
							发送签名
						</Button>
					</>
				);
			},
		},
	];

	const getHospitalSet = async (hosname?: string, hoscode?: string) => {
		const data = await getPageList(page, limit, {
			hosname,
			hoscode,
		});

		setHospitalSet(data.records);
		setTotal(data.total);
	};

	const onFinish = (values: any) => {
		const { hosname, hoscode } = values;

		getHospitalSet(hosname, hoscode);
	};

	const clear = () => {
		form.resetFields();
		getHospitalSet();
	};

	useEffect(() => {
		getHospitalSet();
	}, []);

	return (
		<Card>
			<Form
				form={form}
				layout="inline"
				onFinish={onFinish}
				className="hospital-form"
			>
				<Form.Item name="hosname">
					<Input placeholder="医院名称" />
				</Form.Item>
				<Form.Item name="hoscode">
					<Input placeholder="医院编号" />
				</Form.Item>
				<Form.Item>
					<Button
						icon={<SearchOutlined />}
						type="primary"
						className="hospital-btn"
						htmlType="submit"
					>
						查询
					</Button>
					<Button onClick={clear}>清空</Button>
				</Form.Item>
			</Form>

			<Button
				type="primary"
				className="hospital-btn"
				onClick={() => navigate("/hosp/hospitalSet/add")}
			>
				添加
			</Button>
			<Button danger disabled type="primary" className="hospital-btn">
				批量删除
			</Button>

			<Table
				className="hospital-table"
				columns={columns}
				dataSource={hospitalSet}
				// rowSelection={rowSelection}
				bordered
				rowKey="id"
				pagination={{
					current: page,
					pageSize: limit,
					total,
					showQuickJumper: true,
					showSizeChanger: true,
					showTotal: (total) => `总共 ${total} 条`,
				}}
				rowSelection={{
					type: "checkbox",
				}}
			/>
		</Card>
	);
}

export default HospitalSet;
